<template>
  <view class="container">
    <view class="header">
      <!-- 返回按钮 -->
      <view @click="goIndex">
        <u-icon name="arrow-left" size="30" color="#888" />
      </view>
    </view>
    <view class="book-item" v-for="(book, index) in books" :key="index">
      <image :src="book.cover" class="book-cover"></image>
      <view class="book-info">
        <text class="book-title">{{ book.title }}</text>
        <text class="book-price">￥{{ book.price }}</text>
      </view>
      <view class="button-container">
        <button class="buy-button" @click="addToCart(book)">购买</button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 初始化两个默认的教材数据
      books: [
        { id: 1, title: '数学教材', price: 120, cover: '/static/index/textbooka.jpg' },
        { id: 2, title: '英语教材', price: 150, cover: '/static/index/textbookb.jpg' }
      ],
      isLoading: true // 控制加载状态
    };
  },
  methods: {
    goIndex() {
      uni.switchTab({
        url: '/pages/index/index'
      });
    },
    getBooks() {
      uni.request({
        url: '你的后端API地址', // 替换为你的后端API地址
        method: 'GET',
        success: (response) => {
          if (response.statusCode === 200) {
            this.books = response.data.data || this.books; // 如果后端没有数据，使用默认数据
            this.isLoading = false;
          } else {
            console.error('获取书籍数据失败:', response);
            this.$u.toast('加载书籍数据失败');
          }
        },
        fail: (error) => {
          console.error('获取书籍数据失败:', error);
          this.$u.toast('加载书籍数据失败');
          this.isLoading = false;
        }
      });
    },
    addToCart(book) {
      uni.request({
        url: '你的后端订单API地址', // 替换为你的后端API地址
        method: 'POST',
        data: {
          book: book
        },
        success: (response) => {
          if (response.statusCode === 200) {
            console.log('订单添加成功:', response);
            // 这里可以处理订单添加成功后的逻辑，例如提示用户
            this.$u.toast('添加到购物车成功');
          } else {
            console.error('订单添加失败:', response);
            this.$u.toast('添加到购物车失败');
          }
        },
        fail: (error) => {
          console.error('订单添加失败:', error);
          this.$u.toast('添加到购物车失败');
        }
      });
    }
  },
  created() {
    this.getBooks();
  }
}
</script>

<style>
/* 你的CSS样式 */
.container {
  display: flex;
  flex-direction: column;
 
  padding: 20px;
}

.book-item {
  display: flex;
  border: 1px solid #ddd;
  margin-bottom: 20px;
  padding: 10px;
  width: 100%;
  justify-content: space-between; /* 确保书名和价格与按钮之间的间距 */
}

.header {
  display: flex;
  
  justify-content: flex-start; /* 确保返回按钮靠左 */
}

.book-cover {
  width: 130px;
  height: 150px;
  margin-right: 15px;
}

.book-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-left: 20px; /* 为封面和信息之间添加一些间距 */
}

.book-title {
  font-size: 16px;
  color: #333;
}

.book-price {
  font-size: 16px;
  color: #000000;
  margin-top: 5px; /* 为书名和价格之间添加一些间距 */
}

.button-container {
  display: flex;
  justify-content: flex-end; /* 按钮靠右 */
  align-items: center;
  margin-top: 10px; /* 与上方内容保持一定间距 */
}

.buy-button {
  background-color: #00aaff;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  width: 80px; /* 设置按钮宽度 */
  height: 60px; /* 设置按钮高度 */
}
</style>